<section>
    <div id="pm_latest" class="conversationPlaceholder" ng-if="showWelcome">
        <header translate translate-context="Title">Welcome</header>
        <section id="storageStatus" ng-show="user.UsedSpace > 0">
            <div class="wrap">
                <placeholder-progress></placeholder-progress>
                <span>
                    <strong>{{ ::user.UsedSpace | percentage:user.MaxSpace }}%</strong>
                    <span translate-context="Info" translate>Storage space used.</span>
                </span>
            </div>
        </section>
        <section ng-if="!isFree">
            <a href="https://protonmail.com/blog/best-secure-email-app/" target="_blank" title-translate="Learn More" title-translate-context="Link">
                <img src="/assets/img/welcome/mobile.jpg" />
            </a>
        </section>
        <section ng-if="isFree">
            <a ui-sref="secured.dashboard({scroll: true})" class="text-center latest-upgrade">
                <img src="/assets/img/latest/privacy.jpg" />
                <button type="button" class="pm_button primary" translate translate-context="Action">Upgrade account</button>
            </a>
        </section>
        <div class="pm_grid no-padding flex flex-row">
            <div class="col-1-2">
                <section>
                    <a href="https://shop.protonmail.com" target="_blank">
                        <img src="/assets/img/welcome/shop.jpg" />
                    </a>
                </section>
            </div>
            <div class="col-1-2">
                <section>
                    <a href="https://protonmail.com/support/knowledge-base/custom-domain-support/" target="_blank">
                        <img src="/assets/img/welcome/domain.jpg" />
                    </a>
                </section>
            </div>
        </div>
    </div>

    <count-elements-selected id="pm_placeholder" ng-if="!showWelcome"></count-elements-selected>

</section>
